<?php

use yii\helpers\Url;
use common\models\VideoPic;
use common\models\Videos;
?>
<link rel="stylesheet" href="/assets/css/m-projects.css?2.0">
<script src="/assets/js/jquery.sliderBox.js?v=1.0"></script>
<script>
    $(function(){
        $('#demo-con').sliderBox();
        $('#demo-con2').sliderBox2();
        $('.c_video').click(function(){
            $('.c_video').find('.video_c').each(function(){
                $(this).css('display','none');
                $(this).find('video').removeAttr('id');
            });
            $(this).find('.video_c').css('display','block');
            $(this).find('video').attr('id','aaaa');
            fullScreen();
            playVid();
        });
//        监控窗口变化
        window.onresize = function() {
            if (!checkFull()) {
                //要执行的动作
                $('.video_c').css('display','none');
                pauseVid();
            }
        }
//        判断是否全屏
        function checkFull() {
            var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
            if (isFull === undefined) {isFull = false;}
            return isFull;
        }
//        视频播放
        function playVid(){ 
            var x = document.getElementById("aaaa");
                x.play(); 
        } 
//        视频停止
        function pauseVid(){ 
            var x = document.getElementById("aaaa");
                x.pause(); 
        } 
//        视频全屏播放
        function fullScreen() {
            var el = document.getElementById("aaaa");
            var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
            if (typeof rfs != "undefined" && rfs) {
                rfs.call(el);
            } else if (typeof window.ActiveXObject != "undefined") {
                // for Internet Explorer
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }
    });      
</script>

<div class="projects">
    <div class="banner_top">
        <div class="intr-o">
            <font class="f-1">精彩案例</font>
            <span></span>
        </div>
        <div class="intr-t">
            <font class="f-2">极致体验铸就精湛品质<br>前所未有的革命性工业集尘器</font>
            <span></span>
        </div>
    </div>
    <div class="pro-con">
        
        
        <h2 class="main-h2">精选视频</h2>
        <div class="pro-video">
            <div id="dome-con2">
                <?php
                    if($page){
                        for ($a=0;$a<$page;$a++) {
                ?>
                    <div class="pro-v slider-Box">
                        <div class="pro-v-b c_video">
                            <img src="<?=  IMAGE_URL.Videos::getPageList($a,0)?>">
                            <div class="video_c" style="display:none;width: 100%;height: 100%;">
                                <?= Videos::getPageVideo($a,0);?>
                            </div>
                        </div>
                        <div class="pro-v-s clearfix">
                            <div class="v-s-l left c_video">
                                <img src="<?=  IMAGE_URL.Videos::getPageList($a,1)?>">
                                <div class="video_c" style="display:none;width: 100%;height: 100%;">
                                    <?= Videos::getPageVideo($a,1);?>
                                </div>
                            </div>
                            <div class="v-s-r left c_video">
                                <img src="<?=  IMAGE_URL.Videos::getPageList($a,2)?>">
                                <div class="video_c" style="display:none;width: 100%;height: 100%;">
                                    <?= Videos::getPageVideo($a,2);?>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php }} else { ?>
                    <div class="pro-v slider-Box">
                        <div class="pro-v-b">
                            <img src="/assets/img/pro-v-b.png">
                        </div>
                        <div class="pro-v-s clearfix">
                            <div class="v-s-l left"><img src="/assets/img/v-s-l.png"></div>
                            <div class="v-s-r left"><img src="/assets/img/v-s-r.png"></div>
                        </div>
                    </div>
                    <div class="pro-v slider-Box">
                        <div class="pro-v-b">
                            <img src="/assets/img/pro-v-b.png">
                        </div>
                        <div class="pro-v-s clearfix">
                            <div class="v-s-l left"><img src="/assets/img/v-s-l.png"></div>
                            <div class="v-s-r left"><img src="/assets/img/v-s-r.png"></div>
                        </div>
                    </div>
                    <div class="pro-v slider-Box">
                        <div class="pro-v-b">
                            <img src="/assets/img/pro-v-b.png">
                        </div>
                        <div class="pro-v-s clearfix">
                            <div class="v-s-l left"><img src="/assets/img/v-s-l.png"></div>
                            <div class="v-s-r left"><img src="/assets/img/v-s-r.png"></div>
                        </div>
                    </div>
                <?php }?>
            </div>
            <div class="slid-li">
                <ul id="append-li2">

                </ul>
            </div>
            <div class="switch">
                <a class="p-left" href="javascript:;"><img src="/assets/img/p-left.png"></a><a class="p-right" href="javascript:;"><img src="/assets/img/p-right.png"></a>
            </div>
        </div>
        
        
        <h2 class="main-h2">产品使用图</h2>
        <div class="pro-pic clearfix"  style="overflow: hidden;">
            <div class="dome clearfix" id="dome-con">
                <?php
                    if($pages){
                        foreach ($pages as $v) {    
                ?>
                    <div class="pro-c left slider-Box">
                        <div class="pro-c-l left">
                            <div class="c-1"><img src="<?= IMAGE_URL.VideoPic::getPicAddr($v,1);?>"></div>
                            <div class="c-2 left"><img src="<?= IMAGE_URL.VideoPic::getPicAddr($v,2);?>"></div>
                            <div class="c-4 right"><img src="<?= IMAGE_URL.VideoPic::getPicAddr($v,4);?>"></div>
                            <div class="c-3 left"><img src="<?= IMAGE_URL.VideoPic::getPicAddr($v,3);?>"></div>
                            <div class="c-5"><img src="<?= IMAGE_URL.VideoPic::getPicAddr($v,5);?>"></div>
                        </div>
                        <div class="pro-c-r left">
                            <div class="c-6 left"><img src="<?= IMAGE_URL.VideoPic::getPicAddr($v,6);?>"></div>
                            <div class="c-7 left"><img src="<?= IMAGE_URL.VideoPic::getPicAddr($v,7);?>"></div>
                            <div class="c-8 left"><img src="<?= IMAGE_URL.VideoPic::getPicAddr($v,8);?>"></div>
                        </div>
                    </div>
                <?php }} else {?>
                    <div class="pro-c left slider-Box">
                        <div class="pro-c-l left">
                            <div class="c-1"><img src="/assets/img/p-c-1.png"></div>
                            <div class="c-2 left"><img src="/assets/img/p-c-2.png"></div>
                            <div class="c-4 right"><img src="/assets/img/p-c-4.png"></div>
                            <div class="c-3 left"><img src="/assets/img/p-c-3.png"></div>
                            <div class="c-5"><img src="/assets/img/p-c-5.png"></div>
                        </div>
                        <div class="pro-c-r left">
                            <div class="c-6 left"><img src="/assets/img/p-c-6.png"></div>
                            <div class="c-7 left"><img src="/assets/img/p-c-7.png"></div>
                            <div class="c-8 left"><img src="/assets/img/p-c-8.png"></div>
                        </div>000
                    </div>
                    <div class="pro-c left slider-Box">
                        <div class="pro-c-l left">
                            <div class="c-1"><img src="/assets/img/p-c-1.png"></div>
                            <div class="c-2 left"><img src="/assets/img/p-c-2.png"></div>
                            <div class="c-4 right"><img src="/assets/img/p-c-4.png"></div>
                            <div class="c-3 left"><img src="/assets/img/p-c-3.png"></div>
                            <div class="c-5"><img src="/assets/img/p-c-5.png"></div>
                        </div>
                        <div class="pro-c-r left">
                            <div class="c-6 left"><img src="/assets/img/p-c-6.png"></div>
                            <div class="c-7 left"><img src="/assets/img/p-c-7.png"></div>
                            <div class="c-8 left"><img src="/assets/img/p-c-8.png"></div>
                        </div>111
                    </div>
                    <div class="pro-c left slider-Box">
                        <div class="pro-c-l left">
                            <div class="c-1"><img src="/assets/img/p-c-1.png"></div>
                            <div class="c-2 left"><img src="/assets/img/p-c-2.png"></div>
                            <div class="c-4 right"><img src="/assets/img/p-c-4.png"></div>
                            <div class="c-3 left"><img src="/assets/img/p-c-3.png"></div>
                            <div class="c-5"><img src="/assets/img/p-c-5.png"></div>
                        </div>
                        <div class="pro-c-r left">
                            <div class="c-6 left"><img src="/assets/img/p-c-6.png"></div>
                            <div class="c-7 left"><img src="/assets/img/p-c-7.png"></div>
                            <div class="c-8 left"><img src="/assets/img/p-c-8.png"></div>
                        </div>222
                    </div>
                    <div class="pro-c left slider-Box">
                        <div class="pro-c-l left">
                            <div class="c-1"><img src="/assets/img/p-c-1.png"></div>
                            <div class="c-2 left"><img src="/assets/img/p-c-2.png"></div>
                            <div class="c-4 right"><img src="/assets/img/p-c-4.png"></div>
                            <div class="c-3 left"><img src="/assets/img/p-c-3.png"></div>
                            <div class="c-5"><img src="/assets/img/p-c-5.png"></div>
                        </div>
                        <div class="pro-c-r left">
                            <div class="c-6 left"><img src="/assets/img/p-c-6.png"></div>
                            <div class="c-7 left"><img src="/assets/img/p-c-7.png"></div>
                            <div class="c-8 left"><img src="/assets/img/p-c-8.png"></div>
                        </div>333
                    </div>
                <?php }?>
            </div>

            <div class="slid-li">
                <ul id="append-li"></ul>
            </div>
        </div>
        
        
        <h2 class="main-h2">用户反馈</h2>
        <div class="pro-fk clearfix">
            <div class="fk-i left">
                <img src="/assets/img/fk-i.png">
            </div>
            <div class="fk-intro left">
                <div class="fk-intro-t">
                    <div class="intro-i left"><img src="/assets/img/fk-intro-i.png"></div>
                    <div class="intro-n left">用户0304</div>
                </div>
                <div class="fk-intro-b">
                    <h2>“Gyro Air气陀螺集尘器，彻底消除您的粉尘烦恼”</h2>
                    <h4>近日买来了新产品用起来非常的好，非常给力，很顺手，以前饱受粉尘的困扰，自从有了 GYRO，再也不怕粉尘的侵扰了，非常给力，但是我有个小建议，能够增加功能就更好了。</h4>
                    <font class="intro-n">2018年3月8号</font>
                </div>
            </div>
        </div>
    </div>
</div>
